<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<style>
    .item-box{
        border: 1px solid #9fbbb4; overflow: hidden; padding:0  3px 0 3px;margin-bottom: 3px;
    }
    .item-box .item-box-title {
        float: left;text-align: center;  font-weight: 800;padding: 8px 2px 0 0;width: 100%;
    }
    .form-contanier{
        /*height: 50px; line-height: 50px;*/padding: 0 0 0 3px;width: 950px;
    }
    .form-contanier label{
        font-weight: 400;
    }
    .form-contanier label{
        width: 100px;
    }
    .form-contanier span{
        display: inline-block;
        min-width: 90px;
    }
    .form-contanier input{
        width: 100px;
    }
    #base_info label{width: 100px;display: inline-block}
    #base_info span{width: 200px;display: inline-block}
    .sfzb{
        width: 350px;
        float: left;
        margin-top: 20px;
        margin-left: 25px;
    }
    .sfzb .sfzn{
        width: 200px;
        float: left;
        text-align: center;
        margin-bottom: 10px;
        margin-left: 5px;
    }
    .tabs{
        width: 100%;
        height: 300px;
        /*position: relative;*/
        /*left: 10%;*/
        text-align: center;
        /*border: 1px solid #7a7a7a;*/
    }

    .tabs tr .ttd{
        color: #aa1111;
        width: 20%;
    }
    .tabs tr .ttd1{
        width: 20%;
    }
</style>
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/layer/layer.js"></script>
<%--<script src="${ctxStatic}/js01/jquery.rotate.min.js"></script>--%>
<script>
    function  autoAdaptHeight() {
        $(".form-contanier").each(function (index,dom) {
            var autoHeight=$(this).closest(".item-box-center").outerHeight(true);
            $(this).css("height",autoHeight);
            $(this).closest(".item-box").find(".item-box-title").each(function (index,dom) {
                $(dom).css("height",autoHeight).css("line-height",autoHeight+"px");
            });
            $(this).closest(".item-box").find(".item-box-right").each(function (index,dom) {
                $(dom).css("height",autoHeight).css("line-height",autoHeight+"px");
            })
        });
    }
    $(function () {
        $(".up_item").find("a").remove();
        autoAdaptHeight();
        $(".pic").click(function(){
            var url=$(this).attr("src");
            //页面层
            layer.open({
                type: 2,
                title:"资料大图",
                offset:["10px","10px"],
                skin: 'layui-layer-rim', //加上边框
                area:['90%','90%'],
//                content: ' <div class="div1"><input type="button" class="b1" value="放大" onclick="blowup()"> <input type="button" value="缩小" class="b1" onclick="reduce()"> <input id="input2" type="button" value="旋转" class="b1"  onclick="changeStyle1()" ></div><div  style="overflow-x:scroll;"><img  name="images1" id="img" class="imgRotate"  src="'+url+'" style="position: absolute;"/></div>'
                content: '${ctx}/sys/loan/loan/getImgurl?url='+url
            });
        });
    });
</script>
<div style="padding: 20px" id="item_container">
    <div class="item-box">
        <div  class="item-box-title" >
           客户个人信息
        </div>
        <%--<div style="text-align: center" class="item-box-center">--%>
                <%--<div  id="base_info" style="min-height:40px;line-height:40px;padding-top: 10px;width: 100%">--%>
                    <%--<div>--%>
                        <%--<label> 姓名：</label>--%>
                        <%--<span><c:if test="${member.realname == ''}">--%>
                            <%--${member.nickname}</c:if> ${member.realname} </span>--%>
                        <%--<label> 性别：</label>--%>
                        <%--<span> ${member.sex}</span>--%>
                    <%--</div>--%>

                    <%--<div>--%>
                        <%--<label> 生日：</label>--%>
                         <%--<span> ${member.birthdayStr}</span>--%>
                        <%--<label> 籍贯：</label>--%>
                        <%--<span> ${member.nativeProvince}${member.nativeCity}${member.nativeCounty}${member.nativeDetail}</span>--%>
                    <%--</div>--%>

                    <%--<div>--%>
                      <%--<label> 现居住地：</label>--%>
                         <%--<span>  ${member.residentProvince}${member.residentCity}${member.residentCounty}${member.residentDetail}</span>--%>
                        <%--<label> 婚姻状况：</label>--%>
                        <%--<span>--%>
                            <%--<c:choose>--%>
                                <%--<c:when test="${member.maritalStatus=='0'}">未婚</c:when>--%>
                                <%--<c:when test="${member.maritalStatus=='1'}">已婚</c:when>--%>
                                <%--<c:when test="${member.maritalStatus=='2'}">离异</c:when>--%>
                                <%--<c:when test="${member.maritalStatus=='3'}">丧偶</c:when>--%>
                                <%--<c:otherwise>未知</c:otherwise>--%>
                            <%--</c:choose>--%>
                        <%--</span>--%>
                    <%--</div>--%>

                    <%--<div>--%>
                         <%--<label> 工作单位：</label>--%>
                         <%--<span>  ${member.company}</span>--%>
                         <%--<label> 单位性质：</label>--%>
                         <%--<span>  ${member.companyType}</span>--%>
                    <%--</div>--%>
                    <%--<div>--%>
                        <%--<label> 职务：</label>--%>
                         <%--<span>  ${member.job}</span>--%>
                        <%--<label> 入职时间：</label>--%>
                        <%--<span>  ${member.entryTimeStr}</span>--%>
                    <%--</div>--%>
                    <%--<div>--%>
                         <%--<label> 月收入：</label>--%>
                         <%--<span>  ${member.monthIncome}</span>--%>
                        <%--<label>  电话：</label>--%>
                        <%--<span>  ${member.telephone}</span>--%>
                    <%--</div>--%>
                <%--</div>--%>
        <%--</div>--%>
        <table class="tabs" border="1" cellpadding="0" cellspacing="1" style="border-color: #aaaaaa;">
            <tr>
                <td class="ttd">姓名:</td>
                <td class="ttd1"><c:if test="${member.realname == ''}">
                    ${member.nickname}</c:if> ${member.realname}</td>
                <td class="ttd">性别:</td>
                <td class="ttd1">${member.sex}</td>
            </tr>
            <tr>
                <td class="ttd">籍贯:</td>
                <td class="ttd1">${member.nativeProvince}${member.nativeCity}${member.nativeCounty}${member.nativeDetail}</td>
                <td class="ttd">婚姻状况:</td>
                <td class="ttd1"> <c:choose>
                    <c:when test="${member.maritalStatus=='0'}">未婚</c:when>
                    <c:when test="${member.maritalStatus=='1'}">已婚</c:when>
                    <c:when test="${member.maritalStatus=='2'}">离异</c:when>
                    <c:when test="${member.maritalStatus=='3'}">丧偶</c:when>
                    <c:otherwise>未知</c:otherwise>
                </c:choose></td>
            </tr>
            <tr>
                <td class="ttd">现居住地:</td>
                <td class="ttd1">${member.residentProvince}${member.residentCity}${member.residentCounty}${member.residentDetail}</td>
                <td class="ttd">入职时间:</td>
                <td class="ttd1">${member.entryTimeStr}</td>
            </tr>
            <tr>
                <td class="ttd">工作单位:</td>
                <td class="ttd1">${member.company}</td>
                <td class="ttd">生日:</td>
                <td class="ttd1">${member.birthdayStr}</td>
            </tr>
            <tr>
                <td class="ttd">单位地址:</td>
                <td class="ttd1">${member.companyAddress}</td>
                <td class="ttd">职务:</td>
                <td class="ttd1">${member.job}</td>
            </tr>
            <tr>
                <td class="ttd">手机:</td>
                <td class="ttd1"><shiro:hasPermission name="sys:member:member:phone">${member.telephone}</shiro:hasPermission></td>
                <td class="ttd">月收入:</td>
                <td class="ttd1">${member.monthIncome}</td>
            </tr>
            <tr>
                <td class="ttd">单位性质:</td>
                <td class="ttd1">${member.companyType}</td>
                <td class="ttd">单位电话:</td>
                <td class="ttd1">${member.companyTel}</td>
            </tr>
        </table>
    </div>
    <div class="item-box">
        <div  class="item-box-title" >
        <c:if test="${fn:length(sfz)>0}">
            身份证信息</c:if>
        </div>
        <c:forEach var="sfz" items="${sfz}" varStatus="retStatus">
            <div class="sfzb">
                <div class="sfzn" style="width: 120px;"> <c:if test="${sfz.name == null}">${sfz.typeName}</c:if>${sfz.name}:</div>
                <div class="sfzn"><c:if test="${sfz.url != null}"><img src="${sfz.url}"  width="150" height="150" class="pic" /> </c:if>
                        ${sfz.value}
                </div>
            </div>
        </c:forEach>
    </div>
    <c:if test="${fn:length(ret)<1}">
        暂无上传资料
    </c:if>
    <c:forEach var="item" items="${ret}" varStatus="retStatus">
        <form id="item_form">
            <div class="item-box">
                <div  class="item-box-title" >
                        ${item.key.name}
                </div>
                <div style="float: left" class="item-box-center">
                    <input  type="hidden" value="${item.value[0].groupId}" name="groupId">
                    <div class="form-contanier">
                            <%--遍历该类型的所有资料类型 例如身份证下面的所有资料类型--%>
                        <c:forEach var="type" items="${item.key.children}" varStatus="status" >
                            <div id="up_item" style="display: inline-block;width: 300px;float: left;min-height:40px;line-height:40px;">
                                <label> ${type.name}:</label>
                                <span class="up_item">
                                <c:choose>
                                    <%--radio类型--%>
                                    <c:when test="${'radiobox'==type.type}">
                                        <c:forEach var="keyValue" items="${type.keyValues}">
                                             <c:forEach var="obj" items="${item.value}"><c:if test="${obj.value==keyValue.value}">${keyValue.label} </c:if></c:forEach>
                                        </c:forEach>
                                    </c:when>
                                    <%--图片类型--%>
                                    <c:when test="${'fileselect'==type.type}">
                                        <%--遍历该类型用户上传的所有资料 例如用户上传的所有身份证资料--%>
                                        <input type="hidden" name="typeId" value="${type.id}" >
                                        <input type="hidden" name="id" value="<c:forEach var="obj" items="${item.value}"><c:if test="${obj.typeId==type.id}">${obj.id}</c:if></c:forEach>" >
                                        <c:forEach var="obj" items="${item.value}">
                                            <c:if test="${obj.typeId==type.id}"><img src="${obj.url}"  width="100" height="100" class="pic" /></c:if>
                                        </c:forEach>
                                    </c:when>
                                    <%-- 普通文本类型 --%>
                                    <c:otherwise>
                                        <label><c:forEach var="obj" items="${item.value}"><c:if test="${obj.typeId==type.id}">${obj.value}</c:if></c:forEach></label>
                                    </c:otherwise>
                                </c:choose>
                            </span>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </form>
    </c:forEach>
</div>
<script>
    window.onload = function() {

        var oDiv = document.getElementById('div1');
        var oImg = document.getElementById('img');

        drag(oImg);

        drag(oDiv);

        function drag(obj) {

            obj.onmousedown = function(ev) {
                var ev = ev || event;

                var disX = ev.clientX - this.offsetLeft;
                var disY = ev.clientY - this.offsetTop;



                document.onmousemove = function(ev) {
                    var ev = ev || event;

                    obj.style.left = ev.clientX - disX + 'px';
                    obj.style.top = ev.clientY - disY + 'px';
                }

                document.onmouseup = function() {
                    document.onmousemove = document.onmouseup = null;

                }

                return false;

            }

        }

    }
</script>

